<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <!-- 组件可以通过属性来传参 -->
       <!-- 字符串 -->
       <demo post-title="hhhh"></demo>
       <!-- 数组 -->
       <demo :arr="['a','b','c']"></demo>
       <!-- 函数 -->
        <demo :func="func_from_parent"></demo>
        <!-- promise  ES6新增 -->
        <demo :prom="prom"></demo>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 定义组件
        Vue.component("demo",{
            // props接收 通过属性传递过来的参数;若是-的形式，会转成驼峰形式
            // props可以接收对象，校验数据
            props:{
                // type接收数据类型：可以接收一个数据类型组成的数据
                // default当没有接收到值时的默认值
                postTitle:{
                    type:[Number,String,Array],
                    default:"zzzz"
                },
                arr:{
                    type:Array,
                    default:function(){
                        return [];
                    }
                },
                func:{
                    type:Function,
                },
                prom:{
                    type:Promise
                }

            },
            // template:html
            template:`
                <div>
                    <h1>{{postTitle}}</h1>
                    <section v-for="(item,index) in arr">{{item}}</section>
                </div>
                `
        });


        let vm=new Vue({
            el:"#app",
            data:{
               
            }

        })



    </script>
</body>
</html>